<template>
  <div class="crud-table-demo">
    <div class="demo-header">
      <h1>CrudTable 组件示例</h1>
      <p>展示表头固定、滚动条和不同主题的功能</p>
    </div>

    <div class="demo-section">
      <h2>1. 固定表头表格 (height: 300px)</h2>
      <p>当数据超过表格高度时，表头会固定在顶部，内容可以滚动</p>
      <CrudTable :data="tableData" :height="300" :fixed-header="true" :scrollable="true" theme="modern" border stripe>
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="name" label="姓名" width="120" />
        <el-table-column prop="email" label="邮箱" width="200" />
        <el-table-column prop="department" label="部门" width="150" />
        <el-table-column prop="position" label="职位" width="150" />
        <el-table-column prop="salary" label="薪资" width="120" />
        <el-table-column prop="joinDate" label="入职日期" width="120" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="row.status === '在职' ? 'success' : 'warning'">
              {{ row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" fixed="right">
          <template #default="{ row }">
            <el-button size="small" type="primary" @click="handleEdit(row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </CrudTable>
    </div>

    <div class="demo-section">
      <h2>2. 最大高度表格 (max-height: 250px)</h2>
      <p>使用max-height属性，表格高度会根据内容自适应，但不超过最大高度</p>
      <CrudTable :data="shortTableData" :max-height="250" :fixed-header="false" :scrollable="true" theme="default"
        border>
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="name" label="产品名称" />
        <el-table-column prop="price" label="价格" width="120" />
        <el-table-column prop="category" label="分类" width="120" />
        <el-table-column prop="stock" label="库存" width="100" />
        <el-table-column label="操作" width="150">
          <template #default="{ row }">
            <el-button size="small" @click="handleView(row)">查看</el-button>
          </template>
        </el-table-column>
      </CrudTable>
    </div>

    <div class="demo-section">
      <h2>3. 最小化主题表格</h2>
      <p>简洁的最小化主题，适合简单的数据展示</p>
      <CrudTable :data="simpleTableData" :height="200" :fixed-header="true" theme="minimal" size="small">
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="value" label="值" />
        <el-table-column prop="description" label="描述" />
      </CrudTable>
    </div>

    <div class="demo-controls">
      <h2>4. 动态控制示例</h2>
      <div class="controls">
        <el-button @click="addData">添加数据</el-button>
        <el-button @click="removeData">删除数据</el-button>
        <el-button @click="toggleTheme">切换主题</el-button>
        <el-button @click="toggleSize">切换尺寸</el-button>
      </div>

      <CrudTable :data="dynamicTableData" :height="250" :fixed-header="true" :scrollable="true" :theme="currentTheme"
        :size="currentSize" border stripe>
        <el-table-column type="index" label="#" width="50" />
        <el-table-column prop="title" label="标题" />
        <el-table-column prop="author" label="作者" width="120" />
        <el-table-column prop="date" label="日期" width="120" />
        <el-table-column prop="views" label="浏览量" width="100" />
      </CrudTable>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import CrudTable from './index.vue'
import { ElMessage } from 'element-plus'

/**
 * 生成示例数据
 */
const generateEmployeeData = (count: number) => {
  const departments = ['技术部', '产品部', '市场部', '人事部', '财务部']
  const positions = ['工程师', '产品经理', '设计师', '分析师', '专员']
  const statuses = ['在职', '离职']
  return Array.from({ length: count }, (_, index) => ({
    id: index + 1,
    name: `员工${index + 1}`,
    email: `employee${index + 1}@company.com`,
    department: departments[index % departments.length],
    position: positions[index % positions.length],
    salary: Math.floor(Math.random() * 50000) + 50000,
    joinDate: new Date(2020 + Math.floor(Math.random() * 4), Math.floor(Math.random() * 12), Math.floor(Math.random() * 28) + 1).toLocaleDateString(),
    status: statuses[Math.floor(Math.random() * statuses.length)]
  }))
}

const generateProductData = (count: number) => {
  const categories = ['电子产品', '服装', '食品', '图书', '家居']

  return Array.from({ length: count }, (_, index) => ({
    id: index + 1,
    name: `产品${index + 1}`,
    price: Math.floor(Math.random() * 1000) + 100,
    category: categories[index % categories.length],
    stock: Math.floor(Math.random() * 100)
  }))
}

const generateSimpleData = (count: number) => {
  return Array.from({ length: count }, (_, index) => ({
    name: `配置项${index + 1}`,
    value: `值${index + 1}`,
    description: `这是配置项${index + 1}的描述信息`
  }))
}

interface ArticleData {
  id: number
  title: string
  author: string
  date: string
  views: number
}

const generateArticleData = (count: number): ArticleData[] => {
  const authors = ['张三', '李四', '王五', '赵六', '钱七']

  return Array.from({ length: count }, (_, index) => ({
    id: index + 1,
    title: `文章标题${index + 1}`,
    author: authors[index % authors.length] || '未知作者',
    date: new Date(2024, Math.floor(Math.random() * 12), Math.floor(Math.random() * 28) + 1).toLocaleDateString(),
    views: Math.floor(Math.random() * 10000)
  }))
}

// 表格数据
const tableData = ref(generateEmployeeData(50))
const shortTableData = ref(generateProductData(5))
const simpleTableData = ref(generateSimpleData(15))
const dynamicTableData = ref<ArticleData[]>(generateArticleData(20))

// 动态控制
const currentTheme = ref<'default' | 'modern' | 'minimal'>('modern')
const currentSize = ref<'large' | 'default' | 'small'>('default')

/**
 * 事件处 函数
 */
const handleEdit = (row: Record<string, unknown>) => {
  ElMessage.success(`编辑员工: ${row.name}`)
}

const handleDelete = (row: Record<string, unknown>) => {
  ElMessage.warning(`删除员工: ${row.name}`)
}

const handleView = (row: Record<string, unknown>) => {
  ElMessage.info(`查看产品: ${row.name}`)
}

const addData = () => {
  const newArticle: ArticleData = {
    id: dynamicTableData.value.length + 1,
    title: `文章标题${dynamicTableData.value.length + 1}`,
    author: '新作者',
    date: new Date().toLocaleDateString(),
    views: Math.floor(Math.random() * 1000)
  }
  dynamicTableData.value.push(newArticle)
  ElMessage.success('添加数据成功')
}

const removeData = () => {
  if (dynamicTableData.value.length > 0) {
    dynamicTableData.value.pop()
    ElMessage.success('删除数据成功')
  }
}

const toggleTheme = () => {
  const themes: Array<'default' | 'modern' | 'minimal'> = ['default', 'modern', 'minimal']
  const currentIndex = themes.indexOf(currentTheme.value)
  const nextIndex = (currentIndex + 1) % themes.length
  const nextTheme = themes[nextIndex]
  if (nextTheme) {
    currentTheme.value = nextTheme
    ElMessage.info(`切换到${currentTheme.value}主题`)
  }
}

const toggleSize = () => {
  const sizes: Array<'large' | 'default' | 'small'> = ['large', 'default', 'small']
  const currentIndex = sizes.indexOf(currentSize.value)
  const nextIndex = (currentIndex + 1) % sizes.length
  const nextSize = sizes[nextIndex]
  if (nextSize) {
    currentSize.value = nextSize
    ElMessage.info(`切换到${currentSize.value}尺寸`)
  }
}
</script>

<style lang="scss" scoped>
.crud-table-demo {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  overflow-x: auto;

  .demo-header {
    text-align: center;
    margin-bottom: 40px;

    h1 {
      color: #2c3e50;
      margin-bottom: 10px;
    }

    p {
      color: #7f8c8d;
      font-size: 16px;
    }
  }

  .demo-section {
    margin-bottom: 40px;

    h2 {
      color: #34495e;
      margin-bottom: 10px;
      font-size: 18px;
    }

    p {
      color: #7f8c8d;
      margin-bottom: 20px;
      font-size: 14px;
    }
  }

  .demo-controls {
    .controls {
      margin-bottom: 20px;
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .crud-table-demo {
    padding: 10px;

    .demo-controls {
      .controls {
        flex-direction: column;
        align-items: stretch;
      }
    }
  }
}
</style>
